<!DOCTYPE HTML>
<html>
<head th:replace="mgr/base/head :: head('模板导入导出')"></head>
<body>
	<nav th:replace="mgr/base/nav :: active('tpl-export')"></nav>
	<div id="page-wrapper" style="padding: 10px">
		<div class="container-fluid">
			<div class="row" style="margin-bottom: 10px">
				<div class="col-md-8 col-md-offset-2">
					<div class="alert alert-danger" th:unless="${error == null}"
						th:text="${messages.getMessage(error)}"></div>
				</div>
			</div>
			<div class="row" style="margin-bottom: 10px">
				<div class="col-md-8 col-md-offset-2">
					<form role="form" th:action="@{/mgr/tpl/export}" method="post">
						<div class="form-group">
							<label>空间</label> <select class="form-control" name="spaceId">
								<option value="">默认</option>
								<option th:each="space : ${spaces}" th:value="${space.id}"
									th:text="${space.name}"></option>
							</select>
						</div>
						<input type="hidden" th:name="${_csrf.parameterName}"
							th:value="${_csrf.token}" />
						<button type="submit" class="btn btn-default">导出模板</button>
					</form>
				</div>
			</div>

			<div class="row" style="margin-bottom: 10px">
				<div class="col-md-8 col-md-offset-2">
					<form id="fileupload" autocomplete="off" method="POST"
						enctype="multipart/form-data">
						<div class="form-group">
							<label>空间</label> <select class="form-control" id="importSpaceId">
								<option value="">默认</option>
								<option th:each="space : ${spaces}" th:value="${space.id}"
									th:text="${space.name}"></option>
							</select>
						</div>
						<div class="form-group">
							<label>文件</label> <input type="file" class="form-control"
								id="file" />
						</div>
						<div class="checkbox">
							<label> <input type="checkbox"
								id="createUserPageIfNotExists"> 创建自定义页面(如果不存在)
							</label>
						</div>
						<div class="checkbox">
							<label> <input type="checkbox" id="continueOnFailure">
								发生逻辑异常后继续
							</label>
						</div>
						<button type="button" id="import-btn" class="btn btn-default">导入模板</button>
					</form>
				</div>
			</div>

			<div class="row" id="messages">
				<div class="col-md-8 col-md-offset-2">
					<div class="table-responsive">
						<table class="table">
							<tbody id="messageBody">

							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div th:replace="base/foot_source"></div>
	<script type="text/javascript"
		th:src="@{/static/jquery-file-upload/js/load-image.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/js/canvas-to-blob.min.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/vendor/jquery.ui.widget.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.iframe-transport.js}"></script>
	<script th:src="@{/static/jquery-file-upload/js/jquery.fileupload.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.fileupload-ui.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.fileupload-process.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.fileupload-image.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.fileupload-audio.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.fileupload-video.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.fileupload-validate.js}"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#import-btn").click(function() {
				var file = document.getElementById('file').files[0]; //Files[0] = 1st file
				var fileName = document.getElementById('file').files[0].name;
				if (fileName.indexOf('.json') == -1) {
					bootbox.alert("请选择json格式的文件");
					return;
				}
				var reader = new FileReader();
				reader.readAsText(file, 'UTF-8');
				reader.onload = shipOff;
			})
		})
		function shipOff(event) {
			var result = event.target.result;
			$.post(basePath + '/mgr/tpl/import', {
				"json" : result,
				"createUserPageIfNotExists":$("#createUserPageIfNotExists").is(":checked"),
				"continueOnFailure":$("#continueOnFailure").is(":checked"),
				"spaceId" : $("#importSpaceId").val()
			}, function callBack(data) {
				if (data.success) {
					$("#messages").hide();
					var records = data.data;
					var html = '';
					for (var i = 0; i < records.length; i++) {
						var record = records[i];
						var clazz = record.success ? 'success' : 'danger';
						html += "<tr class='"+clazz+"'><td>" + record.message
								+ "</td></tr>";
					}
					$("#messageBody").html(html);
					$("#messages").show();
				} else {
					bootbox.alert(data.message);
					$("#messages").hide();
				}
			});
		}
	</script>
</body>
</html>